<template>
  <div class="classify">
      <van-sticky>
    <div class="nav-top">
      <div class="nav-left">
        <van-tabs v-model="active" color="transparent" @click="getSecondNav">
          <van-tab :title="v1.name" v-for="(v1, i1) in nav" :key="i1">
          </van-tab>
        </van-tabs>
      </div>
      <div class="nav-right">
        <van-icon @click="toSearch" name="search" size="20" />
      </div>
    </div>
    <div class="nav-second">
      <van-tabs v-model="active2" @click="getSecondNav" background="#f5f5f5" line-width="20">
        <van-tab :title="v2.name" v-for="(v2, i2) in nav2" :key="i2"></van-tab>
      </van-tabs>
    </div>
    </van-sticky>
    <div class="content">
        
      <van-grid :column-num="3" :center="false">
        <van-grid-item v-for="(v3,i3) in listData" :key="i3" @click="gotoDetail({id:v3.id,title:v3.title})">
          <template #text>
            <div class="book-title">{{v3.title}}</div>
            <div class="book-author">{{v3.author}}</div>
          </template>
          <template #icon>
            <img
              class="imgSize"
              :src="v3.cover"
              alt=""
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "classify",
  data() {
    return {
      active: 0,
      active2: 0,
      num: 7,
      type: [
        {
          name: "male",
          id: "244f55f3af7841c9a71dd912c1f6bc26",
        },
        {
          name: "femail",
          id: "d6f496cf3b45479795fe087dbb5ea90a",
        },
        {
          name: "publish",
          id: "8be5f5f01af141fdbc0936350a786f9e",
        },
        {
          name: "audio",
          id: "pjasayqnygh65jcgf3mgwf02esoy0gsy",
        },
      ],
      nav: [],
      nav2: [],
      listData:[],

      
    };
  },
  created() {
    this.getNavData();
    this.getSecondNav();
  },
  methods: {
    gotoDetail(obj) {
      // console.log(title);
      this.$router.push({name:"BookDetail",params:{id:obj.id,title:obj.title}})
    },
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    getNavData() {
      this.axios({
        method: "get",
        url: "store/node.json?gender=1",
      })
        .then((result) => {
          //   console.log(result.data.books);
          // console.log(this.banner);
          this.nav = result.data.books;

          let NavIndex = JSON.parse(localStorage.getItem("NavActive2"));
          if (!NavIndex) {
            this.active = 0;
            // this.$router.push({ name: this.navi[0].type });
          } else {
            this.active = NavIndex;
            // console.log(NavIndex);
            // this.$router.push({ name: this.navi[this.active].type });
          }

          let NavIndex2 = JSON.parse(localStorage.getItem("NavActive3"));
          if (!NavIndex2) {
            this.active2 = 0;
          } else {
            this.active2 = NavIndex2;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSecondNav() {
      this.axios({
        method: "get",
        url: `store/info.json?type=${
          this.type[this.active].name
        }&bar=cat&uuid=${this.type[this.active].id}`,
      })
        .then((result) => {
          //   console.log(result.data.list[0].labels);
          let obj = result.data.list[0].labels[this.active2].url;
          //   console.log(obj);
          this.num = obj.split("=")[1];
          //   console.log(this.num);
          this.axios({
            method: "get",
            url: `source/v2/searchBook.json?catId=${this.num}&page=2`,
          })
            .then((result) => {
              this.listData = result.data.list;

              // localStorage.setItem("NavActive2", JSON.stringify(this.active));
            })
            .catch((err) => {
              console.log(err);
            });

          this.nav2 = result.data.list[0].labels;

          localStorage.setItem("NavActive2", JSON.stringify(this.active));
          localStorage.setItem("NavActive3", JSON.stringify(this.active2));
        })
        .catch((err) => {
          console.log(err);
        });
    },
    
    
  },
};
</script>

<style lang="less" scoped>
.nav-top {
  display: flex;
  justify-content: space-between;
  align-content: center;
  background-color: #fff;
  .nav-left {
    width: 200px;
  }
  .nav-right {
    padding-right: 20px;
    padding-top: 10px;
  }
  .van-tab__text--ellipsis {
    color: #ccc;
  }
  /deep/.van-tab--active {
    font-size: 16px;
    font-weight: 100px;
  }
}
.nav-second {
  width: 375px;
  flex-wrap: wrap;
}
.book-author {
  color: #ccc;
  width: 80px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.imgSize {
  width: 80px;
  height: 100px;
}
/deep/.van-grid-item__content {
  padding-top: 0px;
}
.book-title {
  width: 80px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.content{
    margin-top: 5px;
    padding-bottom: 50px;
}
</style>